<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .nav li {
            list-style: none;
            position: relative;
            float: left;
            height: 40px;
            padding: 0 20px;
            text-align: center;
            line-height: 40px;


        }

        li:hover {
            background-color: orangered;
        }

        a {
            color: black;
            text-decoration: none;

        }

        .nav {
            margin: 100px auto;
            margin-left: 100px;

        }

        .nav ul {
            position: absolute;
            top: 41px;
            left: 0;
            width: 100%;
            border: 1px solid orange;
            border-top: 0;
            display: none;
        }


        .nav ul li {
            border-bottom: 1px solid orange;

        }

        .nav ul li a {
            display: block;
            padding: 8px 0;
            text-align: center;
            line-height: 25px;
        }
    </style>
</head>

<body>
    <ul class="nav">
        <li>
            <a href="#">微博</a>
            <ul>
                <li><a href="#">菜单</a></li>
                <li><a href="#">菜单</a></li>
                <li><a href="#">菜单</a></li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li><a href="#">菜单</a></li>
                <li><a href="#">菜单</a></li>
                <li><a href="#">菜单</a></li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li><a href="#">菜单</a></li>
                <li><a href="#">菜单</a></li>
                <li><a href="#">菜单</a></li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li><a href="#">菜单</a></li>
                <li><a href="#">菜单</a></li>
                <li><a href="#">菜单</a></li>
            </ul>
        </li>



    </ul>
    <script>
        //    需求 鼠标一经过头部li标签 就让li的第二个元素ul显示出来
        // 1.确定事件源
        var nav = document.querySelector('.nav')
        var lis = nav.children


        //   2.循环绑定鼠标经过事件
        for (var i = 0; i < lis.length; i++) {
            lis[i].onmouseover = function () {
                this.children[1].style.display = 'block'//当前的li下标1显示
            }
            lis[i].onmouseout = function () {
                this.children[1].style.display = 'none'
            }
        }















        // var nav = document.querySelector('.nav')
        // var lis = nav.children
        // for (var i = 0; i < lis.length; i++) {
        //     lis[i].onmouseover = function () {
        //         this.children[1].style.display = 'block'//利用children会返回所有子元素节点的集合 然后利用[]获取指定的children里面子元素节点
        //     }
        //     lis[i].onmouseout = function () {
        //         this.children[1].style.display = 'none'
        //     }
        // }
    </script>
</body>

</html>